<template>
  <view v-if="shenheStatus == 0" class="video-detail">
    <video
      :src="videoDetail.url"
      title="这是一个视频标题"
      enable-play-gesture
      vslide-gesture
      @loadedmetadata="loadedmetadata"
    ></video>
    <view class="bottom">
      <view class="title">{{ videoDetail.title }}</view>
      <!-- <view class="content"> {{ videoDetail.content }} </view> -->
      <view class="content">时长：{{ times }} </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      videoDetail: "",
      card_id: "",
      times: "00:00",
    };
  },
  onLoad(params) {
    this.videoDetail = JSON.parse(params?.data);
    this.card_id = params.id;
    this.viewVideo();

    this.$utils.hideShareMenu();
  },
  methods: {
    padding2(num, length) {
      return (Array(length).join("0") + num).slice(-length);
    },
    loadedmetadata(e) {
      if (e.detail.duration) {
        let duration = Math.floor(e.detail.duration);
        let min = this.padding2(Math.floor(duration / 60), 2);
        let sec = this.padding2(duration % 60, 2);
        this.times = min + ":" + sec;
      }
    },
    async viewVideo() {
      try {
        const params = {
          id: this.videoDetail.id,
          sale_id: this.card_id,
        };
        const res = await this.$allrequest.coupon.verifyVideo(params);
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
video {
  margin-top: 36rpx;
  margin-bottom: 46rpx;
  display: block;
  width: 100%;
  height: 380rpx;
}
.bottom {
  padding: 0 24rpx;
  .title {
    line-height: 48rpx;
    font-size: 34rpx;
    font-weight: 600;
    color: #262626;
  }
  .content {
    margin-top: 12rpx;
    line-height: 34rpx;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #8c8c8c;
    font-weight: 400;
  }
}
</style>
